// @ts-nocheck
import {useState, useRef} from 'react';
import {Button, Divider,Popconfirm as Confirm, message} from 'antd'
import {PageHeaderWrapper} from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table'
import {authority} from "@/tools/tool";
import {useModel, Access} from 'umi'
import {ImportOutlined, QuestionCircleOutlined, CloseCircleTwoTone, CheckCircleTwoTone} from "@ant-design/icons";
import {downloadExample, uploadFile, getEquipment, delEquipment, check} from '@/services/equipment'
import SelectEquipmentType from "@/components/Select/SelectEquipmentType";
import ExcelData from "@/components/Common/ExcelData";

const Index = () => {
  const actionRef = useRef()
  const init = useModel('@@initialState');
  const {currentUser} = init.initialState
  const keys = ['设备类型', '设备编码']
  const [importVisible, setImport] = useState(false)
  const useStatus = {0: '闲置', 1: '启用', 2: '更换'}
  const columns = [
    {
      dataIndex: 'equipment_type',
      title: '设备类型',
      width: 100,
      renderFormItem: () => <SelectEquipmentType/>
    },
    {
      dataIndex: 'equipment_code',
      title: '设备编码',
      width: '15%'
    },
    {
      dataIndex: 'use_status',
      title: '设备状态',
      hideInSearch: true,
      width: 100,
      render: (text: any) => useStatus[text]
    },
    {
      dataIndex: 'access_number',
      title: '用户账户',
      width: '20%',
      hideInSearch: true,
    },
    {
      dataIndex: 'import_date',
      title: '导入时间',
      width: '20%',
      hideInSearch: true,
      valueType: 'dateTime'
    },
    {
      dataIndex: 'start_date',
      title: '启用时间',
      width: '20%',
      hideInSearch: true,
      valueType: 'dateTime'
    },
    {
      dataIndex: 'equipment_status',
      title: '校验状态',
      hideInSearch: true,
      width: 150,
      render: (text: any) => text ? <span><CheckCircleTwoTone twoToneColor={'#52c41a'}/>&ensp;已校验</span> : <span><CloseCircleTwoTone twoToneColor={'red'}/>&ensp;未校验</span>
    },
    {
      title: '操作',
      fixed: 'right',
      valueType: 'option',
      width: 200,
      render: (_: any, rowData: any) => [
        !rowData.equipment_status && <>
        <Access key={'1'} accessible={authority('72', currentUser.operation)}>
          <Confirm
            title="光猫将启用，确认完成校验吗?"
            okText="确认"
            icon={<QuestionCircleOutlined style={{color: 'red'}}/>}
            onConfirm={() => check({equipment_id: rowData.equipment_id}).then(res => {
              if (res.status === 200) {
                message.success(res.message).then()
                actionRef.current.reload()
              } else {
                message.error(res.message).then()
              }
            })}
            cancelText="取消"
          >
            <a>
              完成校验
            </a>
          </Confirm>
        </Access>
        <Divider key={'2'} type="vertical"/></>,
        <Access key={'3'} accessible={authority('39', currentUser.operation)}>
          <Confirm
            title="确认删除吗?"
            okText="删除"
            icon={<QuestionCircleOutlined style={{color: 'red'}}/>}
            onConfirm={() => delEquipment({code: rowData.equipment_code}).then(res => {
              if (res.status === 200) {
                message.success(res.message).then()
                actionRef.current.reload()
              } else {
                message.error(res.message).then()
              }
            })}
            cancelText="取消"
          >
            <a>
              删除
            </a>
          </Confirm>
        </Access>

      ]
    }
  ]

  const handleImport = (e: any) => {
    uploadFile({list: e}).then(res => {
      if (res.status === 200) {
        message.success(res.message).then()
        setImport(false)
        actionRef.current.reload()
      } else {
        message.error(res.message).then()
      }
    })
  }
  const download = () => {
    // @ts-ignore
    downloadExample().then(res => {
      const blob = new Blob([res], {type: 'application/vnd.ms-excel;charset=utf-8'});
      const a = document.createElement('a');
      a.href = window.URL.createObjectURL(blob)
      a.download = decodeURIComponent(`设备码上传文件说明及样例.xls`);
      document.body.appendChild(a);
      a.click();
      message.success('下载成功').then()
    })
  }
  return (
    <PageHeaderWrapper>
      <ProTable
        columns={columns}
        actionRef={actionRef}
        // columns={columns}
        request={((params,) => getEquipment(params))}
        toolBarRender={() => [
          <Access key={'1'} accessible={authority('38', currentUser.operation)}>
            <Button key="button" icon={<ImportOutlined/>} type="primary" onClick={() => {
              setImport(true)
            }}>
              导入设备码
            </Button>
          </Access>,
          <a key={'2'} onClick={() => download()}>下载上传文件样例</a>
        ]}
      />
      <ExcelData
        keyList={keys}
        visible={importVisible}
        onClose={() => setImport(false)}
        onOk={(e) => handleImport(e)}
      />
    </PageHeaderWrapper>
  );
};

export default Index;
